<template>
  <div class="list">
    <header>
      <span @click="is=1" :class="is==1 ? 'active': ''">日漫榜</span>
      <span @click="is=2" :class="is==2 ? 'active': ''">国漫榜</span>
      <span @click="is=3" :class="is==3 ? 'active': ''">免费榜</span>
    </header>
    <div v-if="isShow">
      <List v-for="p in Data" :key="p.id" :dataStr="p" :obj="obj" :caricatureId="caricatureId"></List>
    </div>
    <div class="deng" v-if="!isShow">
      <p>载入中....</p>
    </div>
  </div>
</template>

<script>
import List from '../components/List.vue'
export default {
  name: 'ListView',
  components: { List },
  data() {
    return {
      is: 1,
      url: 'http://127.0.0.1/list/DayList',
      Data: '',
      urlStr: 'http://127.0.0.1/list/number',
      obj: '',
      isShow: false,
      caricatureId:''
    }
  },
  methods: {
    getData() {
      fetch(this.url)
        .then(response => response.json())
        .then(data => {
          this.Data = data.data
        });
    },
    getNumber() {
      fetch(this.urlStr)
        .then(response => response.json())
        .then(data => {
          this.obj = data.data
          this.isShow = true
        })
    }
  },
  watch: {
    is(nv, ov) {
      if (nv == 1) {
        this.url = `http://127.0.0.1/list/DayList`
        this.getData()
      } else if (nv == 2) {
        this.url = `http://127.0.0.1/list/GuoList`
        this.getData()
      } else if (nv == 3) {
        this.url = `http://127.0.0.1/list/GratisList`
        this.getData()
      }
    }
  },
  mounted() {
    this.getData(),
      this.getNumber()
  }

}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@bgcolor: #fff3f6;
@fColor: #f77499;
@unonColor: #f5f7f8;
@unfColor: #6c87bd;

header {
  display: flex;
  justify-content: space-around;
  height: 7.4667vw;
  margin: 3.2vw 1.0667vw;

  span {
    padding: 1.6vw 4.8vw;
    border-radius: 5.3333vw;
    background-color: @unonColor;
    color: @unfColor;
    height: 7.4667vw;
    line-height: 4.2667vw;
    font-size: 3.2vw;
  }


}

.deng {
  position: relative;
  top: 44.2667vw;

  p {
    height: 5.3333vw;
    line-height: 5.3333vw;
    font-size: 3.2vw;
    text-align: center;
    margin: 0 auto;
    color: #c0c0c0;
  }
}

.active {
  background-color: @bgcolor;
  color: @fColor;
}
</style>